import 'package:auto_route/auto_route.dart';
import 'package:distribution_mall_flutter/constant/constant.dart';
import 'package:distribution_mall_flutter/pages/goods/product_details/product_details_provider.dart';
import 'package:distribution_mall_flutter/provider/goods/product_details.dart';
import 'package:distribution_mall_flutter/router/route_utils.dart';
import 'package:distribution_mall_flutter/utils/debug.dart';
import 'package:distribution_mall_flutter/utils/image_loader.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';

class ProductNav extends StatelessWidget implements PreferredSizeWidget {
  static const double productNavMarginTop = 16;
  final double imageSize = 28;
  final double iconSize = 18;
  final ScrollController scrollController;

  const ProductNav(this.scrollController, {super.key});

  @override
  Widget build(BuildContext context) {
    return Skeleton.ignore(
      child: Consumer(
        builder: (context, ref, _) {
          ///这里修改为不渐变，需要渐变就去掉三木
          double value =
              ref.watch(productDetailsAppBarProgressProvider(scrollController)) >= 1 ?1:0;
          return Container(
            padding: EdgeInsets.only(
                left: 13,
                top: MediaQuery.of(context).padding.top +
                    ProductNav.productNavMarginTop,
                bottom: 10),
            color: ColorTween(begin: Colors.transparent, end: Colors.white)
                .transform(value),
            width: double.infinity,
            child: Row(
              children: [
                GestureDetector(
                  onTap: () {
                    RouteUtils.back();
                  },
                  child: Container(
                    width: 30,
                    decoration: BoxDecoration(
                        color: ColorTween(
                                begin: const Color(0x80000000),
                                end: Colors.transparent)
                            .transform(value),
                        borderRadius: BorderRadius.circular(2)),
                    height: 30,
                    alignment: Alignment.center,
                    child: Icon(
                      Icons.arrow_back,
                      color: ColorTween(begin: Colors.white, end: Colors.black)
                          .transform(value),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
    // return SliverAppBar(
    //   leading: Icon(Icons.arrow_back_ios_outlined),
    //   // actions: [
    //   //   renderIcon(ImageConstant.proDetailUpload),
    //   //   renderIcon(ImageConstant.proDetailSearch),
    //   //   renderIcon(ImageConstant.proDetailCart),
    //   // ],
    //   expandedHeight: 20,
    //   backgroundColor: Colors.transparent,
    //   flexibleSpace: LayoutBuilder(
    //     builder: (context, constraints) {
    //       double top = constraints.biggest.height;
    //       return FlexibleSpaceBar(
    //         background: Container(
    //           color: top > 91 ? Colors.transparent : Colors.white,
    //         ),
    //       );
    //     },
    //   ),
    //   floating: false,
    //   snap: false,
    //   pinned: true,
    //   stretch: true,
    // );
    // Positioned(
    //     // top: MediaQuery.of(context).padding.top,
    //     width: MediaQuery.of(context).size.width,
    //     left: 0,
    //     height: 70,
    //     child: Row(
    //       mainAxisAlignment: MainAxisAlignment.spaceBetween,
    //       crossAxisAlignment: CrossAxisAlignment.end,
    //       children: [
    //         renderIcon(ImageConstant.proDetailLeft),
    //         const Expanded(child: SizedBox.shrink()),
    //         Row(
    //           children: [
    //             renderIcon(ImageConstant.proDetailUpload),
    //             renderIcon(ImageConstant.proDetailSearch),
    //             renderIcon(ImageConstant.proDetailCart),
    //           ],
    //         )
    //       ],
    //     ));
  }

  @override
  Size get preferredSize => const Size(
      double.infinity, kToolbarHeight + ProductNav.productNavMarginTop);
}
